<template>
  <div class="home">
    <div class="fixed-top" @click="handleCity">
      {{this.$store.state.city}}
    </div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img :src="datas[0].images.medium" alt class="pic" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="datas[1].images.small" alt  class="pic" />
      </van-swipe-item>
    </van-swipe>
    <div class="nav-box">
      <router-link to="/films/nowPlaying">
        <p>正在热映</p>
      </router-link>
      <router-link to="/films/comingSoon">
        <p>即将上映</p>
      </router-link>
    </div>
    <div class="loging">
    <van-loading v-show="this.$store.state.isLoading" type="spinner" color="#1989fa" />

    </div>
    <keep-alive exclude="comingSoon,nowPlaying">
    <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "home",

  data() {
    return {
      datas: []
    };
  },
  mounted() {
    var url = "https://douban.uieee.com/v2/movie/in_theaters";
    this.axios.get(url).then(res => {
    
      var datas = res.data.subjects;
      

      this.datas = datas.slice(0, 2);
    });
  },
  methods:{
    handleCity(){
      this.$router.push({name:'city'})
    }
  }
};
</script>
<style scoped>
.fixed-top{
  position: fixed;
  z-index: 1;
  background: rgb(97, 96, 96);
  opacity: 0.8;
  color: #fff;
  font-size: 14px;
  height: 20px;
  padding: 3px;
  line-height: 20px;
  border-radius: 8px;
  top:18px;
  left: 15px;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
}
.nav-box {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
}
.nav-box > a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50px;
  font-size: 14px;
  color: black;
  border-bottom: 2px solid transparent;
}
.router-link-active > p {
  color: #ff5f16;
  line-height: 49px;
  border-bottom: 2px solid #ff5f16;
}
.loging{
  width:100%;
  text-align: center;

}
</style>